<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
</head>
<style>
    .ancestors *
    {
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
    .siblings *
    {
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
</style>
<script src="../js/jquery-3.4.1.js"></script>
<script>
    $(function () {
        //向上遍历
        // $("span").parent().css({"color":"red","border":"2px solid red"});
        // $("span").parents().css({"color":"red","border":"2px solid red"});
        // $("span").parents("ul").css({"color":"red","border":"2px solid red"});
        // $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
        //向下遍历
        //$(".ancestors").children().css({"color":"red","border":"2px solid red"});
        //$(".ancestors").find("span").css({"color":"red","border":"2px solid red"});
        //同胞遍历
        // $("h2").siblings().css({"color":"red","border":"2px solid red"});
         $("h2").next().css({"color":"red","border":"2px solid red"});
        // $("h2").nextAll().css({"color":"red","border":"2px solid red"});
        // $("h2").nextUntil("p").css({"color":"red","border":"2px solid red"});
    })
</script>
<body>
<div class="ancestors">
    <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)
            <li>li (父元素)
                <span>span</span>
            </li>
        </ul>
    </div>

    <div style="width:500px;">div (祖父元素)
        <p>p (父元素)
            <span>span</span>
        </p>
    </div>
</div>
<div class="siblings">div (父元素)
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>


</body>
</html>